<template>
	<view class="nickname u-skeleton">
		<u-navbar title="修改用户信息" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="title">修改信息</view>
		<view class="tips">*昵称中不能包含敏感字符（4-8个字）</view>
		<view class="t-tips">头像</view>
		<view class="avatar">
			<u-avatar :src="$util.img(src,'upload')"></u-avatar>
			<view class="btn" @click="uploadAvatar">上传头像</view>
		</view>
		<view class="t-tips">昵称</view>
		<view class="box-input">
			<input type="text" placeholder="请输入新的昵称" v-model="nickname">
		</view>
		<u-button class="btn-primary u-skeleton-rect" ripple-bg-color="rgba(0,0,0,.4)" @click="edituser"
			:ripple="true">确定</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//数据加载
				loding: true,
				//用户数据
				info:'',
				//头像信息
				src:'',
				//昵称数据
				nickname:''
			}
		},
		onShow() {
			//获取用户数据
			this.getinfo();
		},
		methods: {
			//获取当前个人数据
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/profile/userInfo',
					success:res=>{
						this.src = res.data.avatar;
						this.nickname = res.data.nickname;
						this.loding = false;
					}
				})
			},
			//上传头像
			uploadAvatar() {
				this.$util.selectImage({
					num: 1,
					success: res => {
						this.src = res;
					}
				})
			},
			//修改用户信息
			edituser(){
				
				this.$http.asyncSendrequest({
					url:'/profile/updateInfo',
					data:{
						nickname:this.nickname,
						avatar:this.src
					},
					success:res=>{
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								if(res.code == '0') {
									uni.navigateBack({delta:1})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nickname {
		width: 100%;
		min-height: 100vh;
		background: #FFFFFF;
		padding: 0 30rpx;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			margin: 50rpx 0 30rpx;
		}
		.tips{
			font-size: 26rpx;
			margin-bottom: 80rpx;
		}
		.avatar{
			margin: 30rpx 0 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.btn{
				height: 50rpx;
				background: #292929;
				border-radius: 6rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				padding: 0 30rpx;
				margin-top: 20rpx;
			}
		}
		.t-tips{
			font-size: 24rpx;
			font-weight: bold;
		}
		.box-input{
			display: flex;
			align-items: center;
			background: var(--bg-project);
			padding: 20rpx;
			border-radius: 6rpx;
			margin: 30rpx 0;
			input{
				font-size: 26rpx;
			}
		}
		
		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin: 116rpx 0 0;
		}
	}
</style>